{% extends "::base.html.twig" %}
{% block title %}{{ parent() }} - Groupes{% endblock %}
{% block titre %}{{ parent() }}Créer un groupe - étape 2{% endblock %}
{% form_theme form _self %}
{% block body %}

Type du groupe choisi : {{page.name}}

<form action="{{ path('groupe_create') }}" method="post" {{ form_enctype(form) }}>
    <div class="col_6">
        <table>
            <tr>
                <td>{{ form_label(form.nom) }} :</td><td>{{ form_widget(form.nom) }}</td>
            </tr>
            <tr>
                <td>{{ form_label(form.description) }} :</td><td>{{ form_widget(form.description) }}</td>
            </tr>
            <tr>
                <td>{{ form_label(form.public) }} :</td><td>{{ form_widget(form.public) }}</td>
            </tr>
        </table>
        <h5>Champs personnalisés</h5>
        {{ form_widget(form.page) }}
        <h5>Mots clés</h5>
        {{ form_widget(form.tags) }}
        {{ form_rest(form) }}
        <table class="record_actions">
            <tr>
                <td><a href="#" id="add_att" class="btn green medium"><span class="icon small white" data-icon="p"></span> Ajouter un mot clé</a></td>
            </tr>
            <tr>
                <td class="right"><a href="{{ path('groupe') }}" class="btn medium blue"><span class="icon small white" data-icon=":"></span> Retour à la liste</a>&nbsp;&nbsp;
                <button type="submit" class="btn medium blue"><span class="icon small white" data-icon="V"></span> Créer</button></td>
            </tr>
        </table>
    </div>
</form>
<!-- On charge la librairie jQuery. Ici, je la prends depuis le site jquery.com, mais si vous l'avez en local, changez simplement l'adresse. -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
    var $container = $('#projeta_groupebundle_groupetype_tags');
	
    // On définit une fonction qui va ajouter un champ.
    function add_att() {
        // On définit le numéro du champ (en comptant le nombre de champs déjà ajoutés).
        index = $container.children().length;

        // On ajoute à la fin de la balise <div> le contenu de l'attribut « data-prototype »,
        // après avoir remplacé la variable $$name$$ qu'il contient par le numéro du champ.
        $container.append(
            $($container.attr('data-prototype').replace(/\$\$name\$\$/g, index))
        );
    }
	
    // On ajoute un premier champ directement s'il n'en existe pas déjà un.
    if($container.children().length == 0) {
        add_att();
    }
	
    // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
    $('#add_att').click(function() {
        add_att();
    });
});
</script>



{% endblock %}
